<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<html>
<head>
<link href="<s:url value="/view/common_view/css/style.css"/>"
	rel="stylesheet" type="text/css" />
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<title><s:property value="getText('title.chitiettaikhoan')"/></title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<script language="javascript">
		function loadDistricts(value1){				  
			$("#quanhuyen").find('option').remove().end();
			/* $.getScript("http://www.someothersite.com/script.js");
			$.ajaxSetup({
				  cache: true
				}); */
			$.ajax({ 
			    type: 'GET', 
			    url: '/CungdealApplication_API/json/GetDistrictByCityAction/'+value1, 
			    /* data: { city_ID: value1 }, */
			    contentType: "application/json; charset=utf-8",
			    dataType: 'json',
			    success: function (data) { 
			        for(var i=0; i<data.district.length;i++){
			        	var districtID=data.district[i].districtID;
			        	$("#quanhuyen").append("<option value="+data.district[i].districtID+">"+data.district[i].districtName+"</option>");
			        }
			    },
			    error: function (er){
			    	alert("Có lỗi xảy ra khi lấy thông tin quận huyện!");
			    }
			});
		}	
		
</script>

<script>
 $(function() {
   $( document ).tooltip({
     position: {
       my: "center bottom-12",
       at: "center top",
       using: function( position, feedback ) {
         $( this ).css( position );
         $( "<div>" )
           .addClass( "arrow" )
           .addClass( feedback.vertical )
           .addClass( feedback.horizontal )
           .appendTo( this );
       }
     }
   });
 });
</script>

<script>
	$(document).ready(function() {
		$("#ngaysinh").datepicker({dateFormat:'dd/mm/yy'});
		$("#ngaysinh").datepicker("option", "dateFormat", "dd/mm/yy");
	});
</script>

<script type="text/javascript">
function beforeSubmit()
{
    var fname = document.getElementById("myfile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
    	
    } else {
    	alert("Bạn vui lòng chỉ chọn hình ảnh!");
    }
}
</script>

</head>
<body>
<div id="maincontent">
	<div id="xemtaikhoan">
		<s:form id="frmxemtaikhoan" method="post" action="update-consumer" enctype="multipart/form-data">
			<fieldset>
				<legend>
				<div id="panelHeader">
					<s:property value="getText('legend.chitiettaikhoannguoidung')"/>
				</div>
				</legend>
				<!-- label Thông báo-->
				<div id="thongbao" class="thongbao">
					<div>
						<label class="message" for="message"><s:property value="getText('message.thongbao')"/></label>
					</div>
				</div>
				<div id="thongbao1" class="thongbao">
					<div style="color: red" id="message">
						<s:iterator value="arrErrorMessage" status="stt">
							<s:property value="arrErrorMessage.get(#stt.index)" />
							<br />
						</s:iterator>
					</div>
					<div style="color: blue" id="succesmessage">
						<s:property value="successmessage"/>
					</div>
					<hr/>
				</div>
				<!--==================================================================== IMAGE-->
				<div id="hinhanh" class="regist-text">	
					<img id="image_viewaccount" class="regist-text" src='<s:property value="%{contextPath + imgAURL}"/>' />
					<div id="chonhinhanh" class="regist-text">
						<input accept="image/png" type="file" <s:property value="getText('label.chonhinhanh')"/> id="myfile" name="myfile"  />
					</div>
				</div>
				<div id="viewaccountprofilecontent">
					<!--==================================================================== LABEL-->
					<div id="label" class="viewaccount-text">
						<div>
							<label class="tentaikhoan" for="tentaikhoan"><s:property value="getText('label.tentaikhoan')"/> :</label>
						</div>
						<div>
							<label class="email" for="email">Email :</label>
						</div>
						<div>
							<label class="hoten" for="hoten"><s:property value="getText('label.hoten')"/> (*):</label>
						</div>
						<div>
							<label class="ngaysinh" for="ngaysinh"><s:property value="getText('label.ngaysinh')"/>:</label>
						</div>
						<div>
							<label class="gioitinh " for="gioitinh"><s:property value="getText('label.gioitinh')"/>  (*) :</label>
						</div>
						<div>
							<label class="thanhpho" for="thanhpho"><s:property value="getText('label.thanhpho')"/> (*):</label>
						</div>
						<div>
							<label class="quanhuyen" for="quanhuyen"><s:property value="getText('label.quanhuyen')"/> (*):</label>
						</div>
						<div>
							<label class="diachi" for="diachi"><s:property value="getText('label.diachi')"/> (*):</label>
						</div>
						<div>
							<label class="sodienthoai" for="sodienthoai"><s:property value="getText('label.sodienthoai')"/> (*):</label>
						</div>
					</div>
					<!--==================================================================== TEXTBOX-->
					<div id="textbox" class="viewaccount-text">
						<div>
							<s:textfield id="tentaikhoan" class="tentaikhoan" type="text"
								value="%{consumer.userID}" name="userID" size="50" disabled="true" />
						</div>
						<div>
							<s:textfield id="email" value="%{consumer.email}" class="email" type="text" name="email"
								size="50" disabled="true" />
						</div>
						<div>
							<s:textfield id="hoten" class="hoten " type="text" value="%{consumer.fullName}" name="fullName"
								size="50" title="Nhập họ tên với chiều dài tối đa 6-50 kí tự" />
						</div>
						<div>
							<s:textfield id="ngaysinh" class="ngaysinh " type="text" value="%{birthDay}" name="birthDay"
								title="Nhập ngày sinh với định dạng: ngày/tháng/năm. Ví dụ: 29/12/1990" size="50" />
						</div>
						<div>
							<s:select id="gioitinh" class="gioitinh"
								headerKey="undefined" headerValue="--" 
								list ="genders"
								name="genderSelected"
								value="genderSelected"
								listKey="genderID"
								listValue="genderName" 
								>
							</s:select>
							
						</div>
						<div>
							<s:select id="thanhpho" class="thanhpho"
								headerKey="0" headerValue="--" 
								list="city"
								value="citySelected"
								name="citySelected"
								onchange="loadDistricts(this.value);"
								listKey="cityID"
								listValue="cityName" 
								>
							</s:select>
						</div>
						<div>
							<s:select id="quanhuyen" class="quanhuyen"
								list="district"
								value="districtSelected"
								name="districtSelected"
								listKey="districtID"
								listValue="districtName" 
								>
							</s:select>
						</div>
						<div>
							<s:textfield id="diachi" class="diachi" type="text" value="%{consumer.address}" name="address"
								size="50" title="Nhập địa chỉ với chiều dài tối đa 10-100 kí tự" />
						</div>
						<div>
							<s:textfield id="sodienthoai" class="sodienthoai" type="text"
								value="%{consumer.phoneNumber}" name="phoneNumber" size="50" title="Nhập số điện thoại với chiều dài tối đa từ 11-20 kí tự" />
						</div>
					</div>
				</div>
				<!--==================================================================== BUTTON-->
				<div id="viewaccount_button" class="viewaccount_button">
					<div class="childbbutton">
						<a class="btn btn-warning" href="home.html" title="Nhấn để quay về trang chủ"><s:property value="getText('button.huy')"/></a>
					</div>
					<div class="childbutton">
						<button class="btn btn-success" type="submit" onclick="beforeSubmit();return false" title="Nhấn để cập nhật thông tin tài khoản"><s:property value="getText('button.dongy')"/></button>
					</div>
				</div>
			</fieldset>
		</s:form>
	</div>
</div>
</body>
</html>
